<template>
  <canvas ref="canvas" class="canvas" width="200" height="200" />
</template>

<script>
export default {
  props: {
    lastTime: {
      // 剩余时间
      type: Number,
      default: 0
    },
    fixedDuration: {
      // 固定时间
      type: Number,
      default: 0
    },
    pcDuration: {
      // 前台时间
      type: Number,
      default: 0
    },
    appDuration: {
      // 网络时间
      type: Number,
      default: 0
    },
    reservedTime: {
      // 已定时间
      type: Number,
      default: 0
    }
    // data: {
    //   type: {},
    //   default: {}
    // }
  },
  mounted() {
    this.canvasRender(this.lastTime, this.reservedTime)
  },
  methods: {
    canvasRender(lastTime, reservedTime) {
      console.log(lastTime, reservedTime)
      const that = this
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')
      const radians = (Math.PI / 180) * 180
      let startTime = Date.now()
      const time = 2000
      let clockwise = 1
      let cp1x, cp1y, cp2x, cp2y
      requestAnimationFrame(function waveDraw() {
        const t = Math.min(1.0, (Date.now() - startTime) / time)

        if (clockwise) {
          cp1x = 90 + (55 * t)
          cp1y = 28 + (72 * t)
          cp2x = 92 - (51 * t)
          cp2y = 179 - (79 * t)
        } else {
          cp1x = 145 - (55 * t)
          cp1y = 100 - (72 * t)
          cp2x = 41 + (51 * t)
          cp2y = 100 + (79 * t)
        }

        ctx.clearRect(0, 0, 200, 200)
        ctx.beginPath()
        ctx.moveTo(0, 100)
        // 绘制三次贝塞尔曲线
        ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, 200, 100)
        // 绘制圆弧
        ctx.arc(100, 100, 100, 0, radians, 0)
        ctx.fillStyle = '#435EBE'
        ctx.fill()
        // 设置字体
        ctx.font = '16px bold 黑体'
        ctx.fillStyle = '#333333'
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.fillText(that.$t('message.sy') + lastTime + that.$t('message.xiaoshi'), 100, 50)
        ctx.font = '16px bold 黑体'
        ctx.fillStyle = '#fff'
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.fillText(that.$t('message.yyd') + reservedTime + that.$t('message.xiaoshi'), 100, 150)
        ctx.save()

        // eslint-disable-next-line eqeqeq
        if (t == 1) {
          startTime = Date.now()
          clockwise = !clockwise
        }
        requestAnimationFrame(waveDraw)
      })
    }
  }
}
</script>

<style scoped>
.canvas {
  box-sizing: content-box;
  background-color: rgba(25, 67, 169, 0.12);
  border-radius: 100%;
  position: relative;
  /* border: 10px solid #435EBE; */
}
</style>
